<template>
  <div class="mask" v-if="visible">
    <transition name="message-fade">
      <div class="lm-message-box">
        <div class="lm-message-box__header">{{ title }}</div>
        <div class="lm-message-box__content">{{ content }}</div>
        <div class="lm-message-box__footer">
          <template v-if="type === 'confirm'">
            <lm-button size="small" @click="handlerClick('cancel')"
              >取消</lm-button
            >
          </template>

          <lm-button type="primary" size="small" @click="handlerClick('ok')"
            >确定</lm-button
          >
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "LmMessageBox",
  props: {
    title: {
      type: String,
      default: "温馨提示",
    },
    content: {
      type: String,
      default: "内容区域",
    },
    onOk: {
      type: Function,
      default: () => {},
    },
    onCancel: {
      type: Function,
      default: () => {},
    },
    type: {
      type: String,
      default: "alert",
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  mounted() {
    this.createElement();
  },
  methods: {
    createElement() {
      this.visible = true;
      document.body.appendChild(this.$el);
    },
    handlerClick(type) {
      if (type === "cancel") {
        this.onCancel();
      } else {
        this.onOk();
      }
      this.close();
    },
    close() {
      this.visible = false;
    },
    destoryElement() {
      this.$destroy();
    },
  },
  beforeDestroy() {
    this.$el.parentNode.removeChild(this.$el);
  },
  watch: {
    visible(newVal) {
      if (!newVal) {
        this.$el.addEventListener("transitionend", this.destoryElement);
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
@import "../../style/common.scss";
.mask {
  @include mask();
}

.lm-message-box {
  display: inline-block;
  width: 420px;
  padding-bottom: 10px;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 18px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lm-message-box__wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.lm-message-box__wrapper::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.lm-message-box__header {
  position: relative;
  padding: 15px 15px 10px;
}

.lm-message-box__title {
  padding-left: 0;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1;
  color: #303133;
}

.lm-message-box__content {
  padding: 10px 15px;
  color: #606266;
  font-size: 14px;
}

.lm-message-box__footer {
  text-align: right;
  padding-right: 10px;
}

.message-fade-enter,
.message-fade-leave-to {
  opacity: 0;
  transform: translateY(-100px);
}

.message-fade-entelm-active,
.message-fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
</style>